<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3-18 createElement</title>
</head>
<body>
<div id="app">
  <test-component>
    <template v-slot:header>
      <div style="background-color:#ccc;height:50px">
        here is navigation
      </div>
    </template>
    <template v-slot:content>
      <div style="background-color: #ddd;height: 50px">
        here is showing book
      </div>
    </template>
    <template v-slot:footer>
      <div style="background-color: #eee;height: 50px">
        here is footer
      </div>
    </template>
  </test-component>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
Vue.component('test-component',{
      render(createElement){
        return createElement('div',[
                createElement("header",this.$slots.header),
          createElement("content",this.$slots.content),
          createElement("footer",this.$slots.footer),
        ])
      }
})
new Vue({el:"#app"})
</script>
</html>